<template>
	<view class="changeInfo">
		<view class="nav-box">
			<view class="title">
				编辑个人资料
			</view>
			<navigator open-type="switchTab" url="/pages/personal/personal" class="iconfont icon-fanhui  icon-nav">
			</navigator>
		</view>
		<view class="box">
			<view class="img-box">
				<image class="img" :src="src" @click="chooseImg"></image>
				<view class="text">
					点击更换头像
				</view>
			</view>
		</view>
		<view class="info-box">

			<navigator open-type="redirect" url="/pages/modify/modify?title=userName" class="text-box">
				<view class="left">
					昵称
				</view>
				<view class="iconfont icon-arrow-right icon-box">

				</view>
				<view class="right">
					{{user.userName}}
				</view>
			</navigator>

			<navigator open-type="redirect" url="/pages/modify/modify?title=douyinId" class="text-box">
				<view class="left">
					抖音号
				</view>
				<view class="iconfont icon-arrow-right icon-box">

				</view>
				<view class="right">
					{{user.userId}}
				</view>
			</navigator>

			<navigator open-type="redirect" url="/pages/modify/modify?title=intrduction" class="text-box">
				<view class="left">
					简介
				</view>
				<view class="iconfont icon-arrow-right icon-box">

				</view>
				<view class="right">
					{{user.intrduction}}
				</view>
			</navigator>

			<picker :range="school" @change="bindSchoolChange">
				<view class="text-box">
					<view class="left">
						学校
					</view>
					<!-- 选择器 -->

					<view class="iconfont icon-arrow-right icon-box">

					</view>
					<view class="right">
						{{user.school}}
					</view>
				</view>
			</picker>
			<picker :range="sex" @change="bindSexChange">
				<view class="text-box">
					<view class="left">
						性别
					</view>
					<view class="iconfont icon-arrow-right icon-box">

					</view>
					<view class="right">
						{{user.sex}}
					</view>
				</view>
			</picker>

			<picker mode="date" :value="user.birthday" @change="bindDateChange">
				<view class="text-box">
					<view class="left">
						生日
					</view>
					<view class="iconfont icon-arrow-right icon-box">
					</view>
					<view class="right">
						{{user.birthday}}
					</view>
				</view>
			</picker>

			<picker mode="region" @change="bindCityChange">
				<view class="text-box">
					<view class="left">
						地区
					</view>
					<view class="iconfont icon-arrow-right icon-box">
					</view>
					<view class="right">
						{{user.city}}
					</view>
				</view>
			</picker>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://124.221.26.166:8080/pic/c.jpg',
				user: {
					userName: "张三",
					userId: "123456",
					intrduction: "因为爱自有天意！",
					school: "点击选择学校",
					sex: "点击选择性别",
					birthday: "点击选择生日",
					city: "点击选择地区"
				},
				school: ['清华大学', '北京大学', '上海大学', '南京大学', '云南大学'],
				sex: ['男', '女']
			}
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					// 设置数量为一
					count: 1,
					// 设置来源从相册(album),相机拍照(camera)选择
					sourceType: ['album', 'camera'],
					// 设置大小类型 原图或压缩
					sizeType: ['original', 'compressed'],
					success: (res) => {
						// console.log(res.tempFilePaths)
						this.src = res.tempFilePaths
					}
				})
			},
			// 绑定学校
			bindSchoolChange(e) {
				// console.log(this.school[e.target.value])
				this.user.school = this.school[e.target.value]
				uni.setStorage({
					key: 'school',
					data: this.school[e.target.value],
					success() {
						// console.log("学校存入缓存成功")
					}
				})
			},
			// 绑定性别
			bindSexChange(e) {
				// console.log(this.sex[e.target.value])
				this.user.sex = this.sex[e.target.value]
				uni.setStorage({
					key: 'sex',
					data: this.sex[e.target.value],
					success() {
						// console.log("性别存入缓存成功")
					}
				})
			},
			// 绑定生日
			bindDateChange(e) {
				console.log(e.target.value)
				this.user.birthday = e.target.value
				uni.setStorage({
					key: 'birthday',
					data: e.target.value,
					success() {
						// console.log("生日存入缓存成功")
					}
				})
			},
			// 绑定地区
			bindCityChange(e) {
				// console.log(e.target.value[0])
				this.user.city = e.target.value[0]
				uni.setStorage({
					key: 'city',
					data: e.target.value[0],
					success() {
						// console.log("城市存入缓存成功")
					}
				})
			}

		},
		onLoad() {
			const that = this;
			uni.getStorage({
					key: 'userName',
					success:(res)=> {
						// console.log("获取缓存中的昵称"+res.data)
						that.user.userName = res.data
					}
			}),
		    uni.getStorage({
		    	key: 'userId',
		    	success:(res)=> {
		    		// console.log("获取缓存中的抖音号"+res.data)
		    		that.user.userId = res.data
		    	}
		    }),
		    uni.getStorage({
		    	key: 'intrduction',
		    	success:(res)=> {
		    		// console.log("获取缓存中的个人简介"+res.data)
		    		that.user.intrduction = res.data
		    	}
		    }),
		    uni.getStorage({
		    	key: 'school',
		    	success:(res)=> {
		    		// console.log("获取缓存中的个学校"+res.data)
		    		that.user.school = res.data
		    	}
		    }),
		    uni.getStorage({
		    	key: 'sex',
		    	success:(res)=> {
		    		// console.log("获取缓存中的性别"+res.data)
		    		that.user.sex = res.data
		    	}
		    }),
		    uni.getStorage({
		    	key: 'birthday',
		    	success:(res)=> {
		    		// console.log("获取缓存中的生日"+res.data)
		    		that.user.birthday = res.data
		    	}
		    }),
		    uni.getStorage({
		    	key: 'city',
		    	success:(res)=> {
		    		// console.log("获取缓存中的地区"+res.data)
		    		that.user.city = res.data
		    	}
		    })
		}
	}
</script>

<style>
	.changeInfo {
		width: 100%;
		height: 100%;
		background: #000000;
	}

	.nav-box {
		height: 50px;
		position: relative;
		margin: 0 auto;
		padding-top: 30px;
	}

	.title {
		text-align: center;
		color: #FFFFFF;
		font-size: 18px;
	}

	.icon-nav {
		position: absolute;
		top: 30px;
		left: 10px;
		color: #FFFFFF;
	}

	.box {
		width: 100%;
		height: 150px;
		margin: 0 auto;
		border-top: 1px solid #333333;
		border-bottom: 1px solid #333333;
	}

	.img-box {
		text-align: center;
	}

	.img {
		margin-top: 20px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
	}

	.text {
		margin-top: 13px;
		color: #999999;
		font-size: 13px;
	}

	.info-box {
		padding: 0 10px;
	}

	.text-box {
		width: 100%;
		height: 42px;
		line-height: 42px;
	}

	.left {
		float: left;
		font-size: 15px;
		color: #FFFFFF;
	}

	.right {
		float: right;
		font-size: 15px;
		margin-right: 7px;
		color: #999999;
	}

	.icon-box {
		float: right;
		font-size: 15px;
		color: #999999;
		width: 10px;
	}
</style>
